<template>
  <div class="dy-main">
    <div class="dy-header">
      <x-header title="财富一览" :left-options="{backText: ''}"></x-header>
      <tab :line-width="2" class="xTab">
        <tab-item :selected="tabSelected === '1'" @click.native="tabSelected = '1'">持有资产</tab-item>
        <tab-item :selected="tabSelected === '2'" @click.native="tabSelected = '2'">我的欠款</tab-item>
      </tab>
    </div>
    <div class="dy-body">
      <div v-show="tabSelected === '1'">
        <group title="我的储蓄">
          <cell title="活期存款" value="1,200,00元">
            <span slot="icon" class="slotSpan red"></span>
          </cell>
          <cell title="定期存款" value="390,00元">
            <span slot="icon" class="slotSpan yellow"></span>
          </cell>
        </group>
        <group title="我的理财">
          <cell title="理财产品" value="0,00元">
            <span slot="icon" class="slotSpan lightBlue"></span>
          </cell>
          <cell title="国债" value="0,00元">
            <span slot="icon" class="slotSpan blue"></span>
          </cell>
        </group>
      </div>
      <div v-show="tabSelected === '2'">
        <group title="我的信用卡">
          <cell title="信用卡欠款" value="1,000,00元">
            <span slot="icon" class="slotSpan green"></span>
          </cell>
        </group>
        <group title="我的贷款">
          <cell title="锦城E贷" value="20,000,00元">
            <span slot="icon" class="slotSpan orange"></span>
          </cell>
        </group>
      </div>
    </div>
    <!--<div class="dy-footer"></div>-->
  </div>
</template>
<script>

export default{
  data () {
    return {
      tabSelected: '1'
    }
  },
  methods: {
    goNext () {
      let _this = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'CI005002', 'user_Data': { cardNo: _this.cardNo, cardholder: _this.cardholder, IDType: _this.IDType, IDNo: _this.IDNo, payPwd: _this.payPwd, smsCode: _this.smsCode }}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            let returnData = response.data.data[0]
            if (returnData.status === '成功') {
              _this.showPositionValue = true
              _this.status = 1
            } else {
              // todo 失败的展示
              _this.showPositionValue = true
              _this.status = 0
            }
          } else {
            console.log('fail')
          }
        })
    }
  }
}
</script>
<style lang="less" scoped>
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .dy-main {
    width: 100%;
    height: 100%;
    font-size: .28rem;
  .dy-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.8rem;
  }
  .dy-body {
    width: 100%;
    height: 100%;
    padding-top: 1.8rem;
    .slotSpan {
      display: block;
      width: .2rem;
      height: .2rem;
      margin-right: .1rem;
    }
    & .red {
      background-color: #ec1b30;
    }
    & .yellow {
      background-color: #fdbf1e;
    }
    & .lightBlue {
      background-color: #46d6ec;
    }
    & .blue {
      background-color: #6695ff;
    }
    & .green {
      background-color: #1bd299;
    }
    & .orange {
      background-color: #fe6b40;
    }
  }
}
</style>

<style>
  .xTab .vux-tab .vux-tab-item.vux-tab-selected {
    color: #ec1b30;
  }
  .xTab .vux-tab-container .vux-tab-ink-bar {
    background-color: #ec1b30;
  }
</style>
